<template>
  <div class="app-container home">
    <!-- 欢迎区域 -->
  <div class="welcome-section" :style="{ backgroundColor: settingsStore.theme }">
      <div class="welcome-title">
        <h1>在线考试管理系统</h1>
        <div class="date">
          <i class="fas fa-calendar-alt"></i> {{ currentDate }}
        </div>
      </div>
      <div class="welcome-content">
        <div class="welcome-text">
          <p>欢迎回来，您有{{ pendingTasks }}条待处理事务，{{ newAnnouncements }}条新公告。祝您工作愉快！</p>
          <div class="welcome-stats">
            <div class="stat-item">
              <div class="number">{{ userCount }}</div>
              <div class="label">用户数量</div>
            </div>
            <div class="stat-item">
              <div class="number">{{ studentCount }}</div>
              <div class="label">学生总数</div>
            </div>
            <div class="stat-item">
              <div class="number">{{ teacherCount }}</div>
              <div class="label">教师总数</div>
            </div>
            <div class="stat-item">
              <div class="number">{{ ongoingExams }}</div>
              <div class="label">进行中考试</div>
            </div>
          </div>
        </div>
        <div class="welcome-image">
          <img :src="welcomeImage" alt="教育管理" style="border-radius: 10px; opacity: 0.9;">
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 公告栏 -->
      <div class="section">
        <div class="section-title">
          <i class="fas fa-bullhorn" :style="{ backgroundColor: settingsStore.theme }"></i>
          <h2>系统公告</h2>
        </div>
        <div class="announcement-list">
          <div 
            v-for="(announcement, index) in announcements" 
            :key="index" 
            class="announcement-item"
            @click="viewAnnouncement(announcement)"
          >
            <h3>
              {{ announcement.noticeTitle }}
              <!-- //noticeType1为通知，2为公告 -->
              <span v-if="announcement.noticeType" :class="`tag tag-${announcement.noticeType}`">
                {{ announcement.noticeType==='2' ? '公告' : '通知' }}
              </span>
            </h3>
            <p>{{ announcement.noticeContent }}</p>
            <div class="announcement-date">
              <i class="far fa-clock"></i> {{ announcement.createTime }}
            </div>
          </div>
        </div>
      </div>

      <!-- createBy
: 
"admin"
createTime
: 
"2025-06-26 15:59:32"
noticeContent
: 
"新版本内容"
noticeId
: 
1
noticeTitle
: 
"温馨提醒：2018-07-01 若依新版本发布啦"
noticeType
: 
"2"
remark
: 
"管理员"
status
: 
"0"
updateBy
: 
""
updateTime
: 
null -->
      
      <!-- 核心功能 -->
      <div class="section">
        <div class="section-title">
          <i class="fas fa-cog" :style="{ backgroundColor: settingsStore.theme }"></i>
          <h2>核心功能</h2>
        </div>
        <div class="core-functions">
          <div 
            v-for="(func, index) in coreFunctions" 
            :key="index" 
            class="function-card"
            @click="navigateTo(func.route)"
          >
            <i :class="func.icon"></i>
            <h3>{{ func.title }}</h3>
            <p>{{ func.description }}</p>
          </div>
        </div>
      </div>
      
      <!-- 数据图表 -->
      <div class="chart-container">
        <div class="chart-title">
          <h2>考试数据统计</h2>
          <div class="chart-filter">
            <span>最近30天</span>
          </div>
        </div>
        <div ref="chart" class="chart-content"></div>
      </div>
      
      <!-- 数据卡片 -->
      <div class="data-cards">
        <div 
          v-for="(card, index) in dataCards" 
          :key="index" 
          class="data-card"
          :class="`card-${index + 1}`"
        >
          <i :class="card.icon"></i>
          <div class="card-content">
            <div class="number">{{ card.value }}</div>
            <div class="label">{{ card.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import  useSettingsStore  from '@/store/modules/settings'
import { getStatistics } from '@/api/module/home'
import {listNotice} from '@/api/system/notice'



const settingsStore = useSettingsStore()

// 数据定义
const currentDate = ref('')
//待处理事务条数
const pendingTasks = ref(3)
//用户数量
const userCount = ref(100)
//公告数
const newAnnouncements = ref(5)
//学生人数
const studentCount = ref(1258)
//老师人数
const teacherCount = ref(86)
//进行中的考试
const ongoingExams = ref(24)
const welcomeImage = ref('https://images.unsplash.com/photo-1584697964358-3e14ca57658b?auto=format&fit=crop&w=200')

// 公告数据
const announcements = ref([
  {
    title: '系统维护通知',
    tag: { type: 'important', text: '重要' },
    content: '系统将于本周六凌晨2:00-4:00进行维护升级，届时将暂停服务，请提前安排好工作。',
    date: '2023-11-15'
  },
  {
    title: '期末考试安排发布',
    tag: null,
    content: '2023-2024学年第一学期期末考试时间表已发布，请各位教师及时登录系统查看。',
    date: '2023-11-12'
  },
  {
    title: '新增题库功能上线',
    tag: { type: 'notice', text: '新功能' },
    content: '题库管理模块新增智能组卷功能，支持根据知识点、难度等条件自动生成试卷。',
    date: '2023-11-08'
  },
  {
    title: '教师培训通知',
    tag: null,
    content: '本周五下午3点将举办系统使用培训会，请各位教师准时参加。',
    date: '2023-11-05'
  },
  {
    title: '学生信息更新提醒',
    tag: null,
    content: '请各班主任在11月30日前完成本班学生信息的核对与更新工作。',
    date: '2023-11-01'
  }
])

// 核心功能数据
const coreFunctions = ref([
  {
    icon: 'fas fa-poll',
    title: '成绩管理',
    description: '录入、查询、统计和分析学生考试成绩，考试分段查询和学生分段查询。',
    route: '/score'
  },
  {
    icon: 'fas fa-file-alt',
    title: '考试管理',
    description: '创建和管理考试安排，设置考试时间和试卷题目，查看考试结果。',
    route: '/exam'
  },
  {
    icon: 'fas fa-book',
    title: '题库管理',
    description: '管理各课程试题库，支持试题分类、难度分级和组卷功能。',
    route: '/question'
  },
  {
    icon: 'fas fa-user-graduate',
    title: '学生管理',
    description: '管理学生信息，包括班级分配、学籍管理和学习档案记录。',
    route: '/studentManage'
  },
  {
    icon: 'fas fa-chalkboard-teacher',
    title: '教师管理',
    description: '管理教师信息，分配教学任务和设置系统权限。',
    route: '/teacher'
  },
  {
    icon: 'fas fa-users-cog',
    title: '用户管理',
    description: '管理系统用户账号，分配角色权限和密码重置。',
    route: '/system/user'
  }
])

// 数据卡片
const dataCards = ref([
  {
    icon: 'fas fa-file-alt',
    value: 86,
    label: '进行中考试'
  },
  {
    icon: 'fas fa-check-circle',
    value: 124,
    label: '已完成考试'
  },
  {
    icon: 'fas fa-question-circle',
    value: '12,586',
    label: '系统题库总量'
  },
  {
    icon: 'fas fa-tasks',
    value: 38,
    label: '待处理事务'
  }
])

// 图表相关
const chart = ref(null)
let myChart = null

// 初始化图表
const initChart = () => {
  if (!chart.value) return
  
  // 确保容器有高度
  chart.value.style.height = '280px'
  
  myChart = echarts.init(chart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['考试次数', '成绩录入量', '试题新增量'],
      textStyle: {
        color: '#606266'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['11/01', '11/05', '11/10', '11/15', '11/20', '11/25', '11/30'],
      axisLine: {
        lineStyle: {
          color: '#dcdfe6'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#dcdfe6'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f0f2f5'
        }
      }
    },
    series: [
      {
        name: '考试次数',
        type: 'line',
        smooth: true,
        data: [12, 15, 8, 18, 12, 16, 14],
        lineStyle: {
          width: 3,
          color: '#1a56db'
        },
        itemStyle: {
          color: '#1a56db'
        }
      },
      {
        name: '成绩录入量',
        type: 'line',
        smooth: true,
        data: [120, 142, 101, 184, 135, 162, 148],
        lineStyle: {
          width: 3,
          color: '#16a34a'
        },
        itemStyle: {
          color: '#16a34a'
        }
      },
      {
        name: '试题新增量',
        type: 'line',
        smooth: true,
        data: [45, 68, 32, 86, 54, 72, 58],
        lineStyle: {
          width: 3,
          color: '#ea580c'
        },
        itemStyle: {
          color: '#ea580c'
        }
      }
    ]
  }
  
  myChart.setOption(option)
}

//获取统计人数
 const getCounts= async()=> { 
 const res=await getStatistics()
//学生人数
 studentCount.value = res.data.studentCount
//老师人数
 teacherCount.value = res.data.teacherCount
//进行中的考试
 ongoingExams.value =res.data.examCount
 userCount.value = res.data.userCount

}

//获取公告
const getAnnouncements= async()=> { 
 const res=await listNotice({pageNum:1,pageSize:10})
//公告
 announcements.value = res.rows
 newAnnouncements.value=res.total

}

// 更新图表尺寸
const resizeChart = () => {
  if (myChart) {
    myChart.resize()
  }
}

// 导航功能 - 改为使用路由
import { useRouter } from 'vue-router'
const router = useRouter()
const navigateTo = (route) => {
  router.push(route)
}

// 查看公告
const viewAnnouncement = (announcement) => {
  console.log('查看公告:', announcement.title)
}

// 设置当前日期
const setCurrentDate = () => {
  const now = new Date()
  const options = { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric',
    weekday: 'long'
  }
  currentDate.value = now.toLocaleDateString('zh-CN', options)
}

// 生命周期钩子
onMounted(() => {
  setCurrentDate()
  getCounts()
  getAnnouncements()
  
  // 延迟初始化图表，确保DOM完全渲染
  setTimeout(() => {
    initChart()
    window.addEventListener('resize', resizeChart)
  }, 100)
})

onUnmounted(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped lang="scss">

  .welcome-section {
    // background: linear-gradient(135deg, #1a56db 0%, #0e2a8a 100%);
    color: white;
    padding: 30px 40px;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  
  .welcome-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .welcome-title h1 {
    font-size: 28px;
    font-weight: 600;
  }
  
  .welcome-title .date {
    font-size: 16px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 15px;
    border-radius: 20px;
  }
  
  .welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .welcome-text {
    max-width: 600px;
  }
  
  .welcome-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-top: 10px;
    opacity: 0.9;
  }
  
  .welcome-stats {
    display: flex;
    gap: 25px;
    margin-top: 20px;
  }
  
  .stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 15px 25px;
    border-radius: 10px;
    min-width: 150px;
  }
  
  .stat-item .number {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  
  .stat-item .label {
    font-size: 14px;
    opacity: 0.85;
  }
  
  .main-content {
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  
  .section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border: 1px solid #ebeef5;
  }
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .section-title i {
    // background: #1a56db;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 16px;
  }
  
  .section-title h2 {
    color: #1c1c1e;
    font-size: 20px;
    font-weight: 600;
  }
  
  .announcement-list {
    max-height: 550px;
    overflow-y: auto;
  }
  
  .announcement-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f2f5;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .announcement-item:last-child {
    border-bottom: none;
  }
  
  .announcement-item:hover {
    background: #f9fbfd;
    border-radius: 8px;
    padding: 15px;
    transform: translateX(5px);
  }
  
  .announcement-item h3 {
    color: #1c1c1e;
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }
  
  .announcement-item h3 .tag {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
  }
  // 通知
  .tag-1 {
    background: #fde8e8;
    color: #c81e1e;
  }
  //公告
  .tag-2 {
    background: #ebf5ff;
    color: #1a56db;
  }
  
  .announcement-item p {
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  .announcement-date {
    color: #909399;
    font-size: 13px;
    display: flex;
    align-items: center;
  }
  
  .announcement-date i {
    margin-right: 5px;
    font-size: 14px;
  }
  
  .core-functions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .function-card {
    background: #f9fbfd;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .function-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(26, 86, 219, 0.15);
    border-color: #c2d5ff;
  }
  
  .function-card i {
    font-size: 32px;
    color: #1a56db;
    margin-bottom: 15px;
  }
  
  .function-card h3 {
    color: #1c1c1e;
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .function-card p {
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1;
  }
  
  .chart-container {
    grid-column: span 2;
    height: 350px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 25px;
    border: 1px solid #ebeef5;
  }
  
  .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .chart-title h2 {
    color: #1c1c1e;
    font-size: 18px;
    font-weight: 600;
  }
  
  .chart-content {
    height: 280px;
  }
  
  .data-cards {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 10px;
  }
  
  .data-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }
  
  .data-card i {
    font-size: 32px;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .card-content {
    flex-grow: 1;
  }
  
  .card-content .number {
    font-size: 24px;
    font-weight: 700;
    color: #1c1c1e;
    margin-bottom: 5px;
  }
  
  .card-content .label {
    font-size: 14px;
    color: #909399;
  }
  
  .card-1 i { background: #e1effe; color: #1a56db; }
  .card-2 i { background: #f0fdf4; color: #16a34a; }
  .card-3 i { background: #fef6e6; color: #ea580c; }
  .card-4 i { background: #fae8ff; color: #c026d3; }
  
  @media (max-width: 1200px) {
    .main-content {
      grid-template-columns: 1fr;
    }
    
    .chart-container,
    .data-cards {
      grid-column: span 1;
    }
    
    .data-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 768px) {
    .welcome-content {
      flex-direction: column;
      text-align: center;
    }
    
    .welcome-stats {
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .core-functions {
      grid-template-columns: 1fr;
    }
    
    .data-cards {
      grid-template-columns: 1fr;
    }
  }
</style>